<template>
  <div>个人信息</div>
  <h2>姓:
    <input type="text" v-model="data.firstName">
  </h2>
  <h2>名:
    <input type="text" v-model="data.lastName">
  </h2>
  <br>
  <h2><input type="text" v-model="data.fullName"></h2>
  <span>{{data.fullName}}</span>
</template>

<script>
import { computed, reactive } from 'vue';
export default {
  name: 'Demo',
  // 第一种用vue2计算属性
  // computed: {
  //   fullName(){
  //      return this.data.firstName + this.data.lastName
  //   }
  // },
  setup(){
    // 第二种，记得return {fullName}
    // let fullName = computed(() => {
    //   return data.firstName + data.lastName
    // })

    let data = reactive({
      firstName: "rock",
      lastName: "yao",
      //第三种
      // fullName: computed(() => {
      //   return data.firstName + "-" + data.lastName
      // })
      
      // 第四种， 计算属性——完整写法（考虑读和写）
      fullName: computed({
        get(){
          return data.firstName + "-" + data.lastName
        },
        set(value){
          // console.log(value)  // value  --> data.fullName
          const nameArr = value.split('-')
					data.firstName = nameArr[0]
					data.lastName = nameArr[1]
        }
      })
    })
    return{
      data
    }
  }
}
</script>

<style>

</style>
